<template>

	<div v-cloak v-loading.fullscreen.lock="loading" element-loading-text="加载中"
		:class="{ 'aui-sidebar--fold': sidebarFold }" class="aui-wrapper">

		<!--    <template v-if="!loading">-->
		<!-- navbar -->
		<main-navbar :navbar-layout-type="navbarLayoutType" :content-tabs-active-name="selfContentTabsActiveName"
			:user="user" @switch-sidebar-fold="sidebarFold = !sidebarFold"></main-navbar>
		<!-- sidebar -->
		<!-- <main-sidebar
            :sidebar-layout-skin="sidebarLayoutSkin"
            :sidebar-fold="sidebarFold"
            :sidebar-menu-list="sidebarMenuList"
            :sidebar-menu-active-name="sidebarMenuActiveName"></main-sidebar>-->
		<main-sidebar :sidebar-layout-skin="sidebarLayoutSkin" :sidebar-fold="sidebarFold"
			:sidebar-menu-list="sidebarRouters" :sidebar-menu-active-name="selfContentTabsActiveName"></main-sidebar>
		<div class="aui-content__wrapper">
			<!--         content -->
			<!-- <main-content
          :sidebar-menu-active-name="sidebarMenuActiveName"
          :content-tabs="contentTabs"
          :content-tabs-active-name="contentTabsActiveName"
          @set-sidebar-menu-active-name="setSidebarMenuActiveName"
          @set-content-tabs="setContentTabs"
          @set-content-tabs-active-name="setContentTabsActiveName"></main-content> -->
			<main-content :sidebar-menu-active-name="selfContentTabsActiveName"
				:content-tabs-active-name="selfContentTabsActiveName"
				@set-sidebar-menu-active-name="setSidebarMenuActiveName" @set-content-tabs="setContentTabs"
				@set-content-tabs-active-name="setContentTabsActiveName"></main-content>
		</div>
		<!-- theme-tools -->
		<!-- <main-theme-tools
        :navbar-layout-type="navbarLayoutType"
        :sidebar-layout-skin="sidebarLayoutSkin"
        @set-navbar-layout-type="setNavbarLayoutType"
        @set-sidebar-layout-type="setSidebarLayoutType"></main-theme-tools> -->
		<!--    </template>-->

	</div>
</template>

<script>
	import MainContent from "@/components/layout/MainContent";
	import MainNavbar from "@/components/layout/MainNavbar";
	import MainSidebar from "@/components/layout/MainSidebar";
	import MainThemeTools from "@/components/layout/MainThemeTools";
	import Home from "@/views/Home";

	import {
		useStore
	} from 'vuex'
	import {
		getMenuList,getMenuPermissions
	} from "@/network/sys/menu";
	import {
		getCurrentUser
	} from "@/network/sys/user";

	import {
		ref,
		reactive,
		onMounted,
		nextTick,
		computed
	} from 'vue';
	import {
		validURL
	} from "@/utils/validate";
	import {
		useRouter
	} from 'vue-router';
	import router from '@/router/index'
	import {
		ElMessage
	} from 'element-plus';
	export default {
		name: "index",
		components: {
			'main-navbar': MainNavbar,
			'main-sidebar': MainSidebar,
			'main-content': MainContent,
			'main-theme-tools': MainThemeTools,
		},
		setup(props, content) {
			let loading = ref(false);
			// 导航条, 布局风格, defalut(白色) / colorful(鲜艳)
			const navbarLayoutType = ref('colorful');
			// 侧边栏, 布局皮肤, default(白色) / dark(黑色)
			const sidebarLayoutSkin = ref('dark');
			// 侧边栏, 折叠状态
			const sidebarFold = ref(false);
			// 侧边栏, 菜单
			const sidebarMenuList = ref([]);
			//侧边栏，激活的菜单名
			const sidebarMenuActiveName = ref('');
			// 内容, 是否需要刷新
			const contentIsNeedRefresh = ref(false)
			// 内容, 标签页
			const contentTabs = reactive([{
				menuId: '',
				name: '',
				title: '',
				url: '',
				params: {}
			}])
			//内容，激活的标签页
			const contentTabsActiveName = ref('');
			// 用户信息
			const user = reactive({
				id: 0,
				name: '',
				realName: '',
				superAdmin: 0
			})

			const store = useStore();

			onMounted(() => {
				loading = false;
				//加载用户信息
				store.dispatch('GetInfo');
				//加载用户的授权路由
				store.dispatch('GenerateRoutes');

				store.dispatch('GetPermissions');

				// store.dispatch('initDTagsViews');

				// Promise.all([
				// 	//getUserInfoV(),
				// 	//getPermissions()

				// ]).then(function() {
				// 	console.log(store.state.DRouter.sidebarRouters);
				// 	console.log(store.state.DTabsViews.contentTabsActiveName);
				// 	nextTick(function() {
				// 		//routerHandle(true);
				// 		// vm.i18nHandle(vm.$i18n.locale);
				// 	});
				// }).catch((err) => {
				// 	{
				// 		console.log(err);
				// 	}
				// })

			});

			const getUserInfoV = () => {

				getCurrentUser().then((res) => {

					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					user.id = res.data.id;
					user.name = res.data.username;
					user.realName = res.data.realName;
					user.superAdmin = res.data.superAdmin;


				}).catch(function() {});

			}


			const addMenuRouteList = (menuList) => {
				let temp = [];
				for (let i = 0; i < menuList.length; i++) {
					if (menuList[i].children && menuList[i].children.length >= 1) {
						temp = temp.concat(menuList[i].children);
						continue;
					}
					// 组装路由
					let route = {
						'menuId': menuList[i].id,
						'name': '',
						'title': menuList[i].name,
						'url': '',
						'params': {}
					};
					let URL = (menuList[i].url || '').replace(/{{([^}}]+)?}}/g, function(s1, s2) {
						return eval(s2);
					}); // URL支持{{ window.xxx }}占位符变量
					if (validURL(URL)) {
						route.name = 'i-' + menuList[i].id;
						route.url = URL;
					} else {
						URL = URL.replace(/(.+)\.html/, '$1').replace(/^\//, '').replace(/_/g, '-');
						route.name = URL.replace(/\//g, '-');
						// route.url = './modules/' + URL + '.html';
						route.url = URL;
					}


					window.SITE_CONFIG.routeList.push(route);
				}
				if (temp.length >= 1) {
					return addMenuRouteList(temp);
				}
			}

			const routerHandle = (isInit) => {
				// let routeName = window.location.hash.substring(1).split('?')[0];
				// // 初始化
				// if (isInit && typeof(isInit) === 'boolean') {
				// 	window.addEventListener('hashchange', routerHandle);
				// 	// 如路由为空, 默认为home首页
				// 	if (!/\S/.test(routeName)) {
				// 		window.location.hash = 'home';
				// 		return false;
				// 	}
				// 	// 如重定向路由包含__双下划线, 为临时添加路由
				// 	if (/__.*/.test(routeName)) {
				// 		window.location.hash = routeName.replace(/__.*/, '');
				// 		return false;
				// 	}
				// }
				// let route = window.SITE_CONFIG.routeList.filter(function(item) {
				// 	return item.name === routeName
				// })[0];
				// if (!route) {
				// 	return false;
				// }
				// let tab = contentTabs.filter(function(item) {
				// 	return item.name === routeName
				// })[0];
				// if (!tab) {
				// 	tab = route;
				// 	contentTabs.push(tab);
				// }
				// sidebarMenuActiveName.value = tab.menuId;
				// contentTabsActiveName.value = tab.name;
			}

			// 设置导航条, 布局风格
			const setNavbarLayoutType = (val) => {
				navbarLayoutType.value = val;
			}
			// 设置侧边栏, 布局皮肤
			const setSidebarLayoutType = (val) => {
				sidebarLayoutSkin.value = val;
			}

			// 设置侧边栏, 菜单选中
			const setSidebarMenuActiveName = (val) => {
				sidebarMenuActiveName.value = val;
			}

			// 设置内容, 标签页
			const setContentTabs = (val) => {
				contentTabs.value = val;
			}

			// 设置内容, 标签页选中
			const setContentTabsActiveName = (val) => {

				selfContentTabsActiveName.value = val;
			}
			const selfContentTabsActiveName = computed({
				get: () => {
					return store.state.DTabsViews.contentTabsActiveName
				},
				set: (val) => store.dispatch('setContentTabsActivename', val)
			});


			const isCollapse = ref(false)
			const handleOpen = (key, keyPath) => {

			}
			const handleClose = (key, keyPath) => {

			}

			const router = useRouter()
			const handleSelect = (key, keyPath) => {
				let bool = false;
				for (let i = 0; i < sidebarRouters.value.length; i++) {
					let sidebarRouter = sidebarRouters.value[i];
					for (let j = 0; j < sidebarRouter.children.length; j++) {
						let subSidebarRouter = sidebarRouter.children[j];
						if (key == subSidebarRouter.path) {
							let newTab = {
								name: '',
								path: '',
								label: ''
							};
							newTab.name = subSidebarRouter.name;
							newTab.path = subSidebarRouter.path;
							newTab.label = subSidebarRouter.meta.name;

							store.dispatch('addContentTabs', newTab);

							bool = true;
							router.push(key);
							break;
						}
					}
					if (bool) {
						break;
					}
				}
			}
			const sidebarRouters = computed(() => store.state.DRouter.sidebarRouters)


			return {
				//  handleClick,
				isCollapse,
				handleOpen,
				handleSelect,
				handleClose,
				sidebarRouters,
				loading,
				navbarLayoutType,
				sidebarLayoutSkin,
				sidebarFold,
				sidebarMenuList,
				sidebarMenuActiveName,
				contentIsNeedRefresh,
				contentTabs,
				contentTabsActiveName,
				user,
				addMenuRouteList,
				getUserInfoV,
				setNavbarLayoutType,
				setSidebarLayoutType,
				setSidebarMenuActiveName,
				setContentTabs,
				setContentTabsActiveName,
				routerHandle,
				selfContentTabsActiveName,
			}


		},


		// data: function () {
		//   return {
		//     loading: true,
		//     // 导航条, 布局风格, defalut(白色) / colorful(鲜艳)
		//     navbarLayoutType: 'colorful',
		//     // 侧边栏, 布局皮肤, default(白色) / dark(黑色)
		//     sidebarLayoutSkin: 'dark',
		//     // 侧边栏, 折叠状态
		//     sidebarFold: false,
		//     // 侧边栏, 菜单
		//     sidebarMenuList: [],
		//     sidebarMenuActiveName: '',
		//     // 内容, 是否需要刷新
		//     contentIsNeedRefresh: false,
		//     // 内容, 标签页
		//     contentTabs: [
		//       {
		//         'menuId': 'home',
		//         'name': 'home',
		//         'title': 'home',
		//         'url': './home.html',
		//         'params': {}
		//       }
		//     ],
		//     contentTabsActiveName: '',
		//     // 用户信息
		//     user: {
		//       id: 0,
		//       name: '',
		//       realName: '',
		//       superAdmin: 0
		//     }
		//   }
		// },

		// watch: {
		//   '$i18n.locale': 'i18nHandle'
		// },
		// beforeCreate: function () {
		//   vm = this;
		// },
		// created: function () {

		// vm.getMenuList().then(function () {
		//   vm.addMenuRouteList(vm.sidebarMenuList);
		//   Promise.all([
		//     vm.getUserInfo(),
		//     vm.getPermissions()
		//   ]).then(function () {
		//     vm.loading = false;
		//     vm.$nextTick(function () {
		//       vm.routerHandle(true);
		//       //  vm.i18nHandle(vm.$i18n.locale);
		//     });
		//   });
		// });
		// },
		// methods: {
		// 设置导航条, 布局风格
		// setNavbarLayoutType: function (val) {
		//   vm.navbarLayoutType = val;
		// },
		// // 设置侧边栏, 布局皮肤
		// setSidebarLayoutType: function (val) {
		//   vm.sidebarLayoutSkin = val;
		// },
		// // 设置侧边栏, 菜单选中
		// setSidebarMenuActiveName: function (val) {
		//   vm.sidebarMenuActiveName = val;
		// },
		// // 设置内容, 标签页
		// setContentTabs: function (val) {
		//   vm.contentTabs = val;
		// },
		// // 设置内容, 标签页选中
		// setContentTabsActiveName: function (val) {
		//   vm.contentTabsActiveName = val;
		// },
		// 获取菜单列表
		// getMenuList: function () {
		//   return vm.$http.get('/sys/menu/nav').then(function (res) {
		//     if (res.data.code !== 0) {
		//       return vm.$message.error(res.data.msg);
		//     }
		//     vm.sidebarMenuList = res.data.data;
		//   }).catch(function () {
		//   });
		// },
		// 添加菜单路由列表
		// addMenuRouteList: function (menuList) {
		//   var temp = [];
		//   for (var i = 0; i < menuList.length; i++) {
		//     if (menuList[i].children && menuList[i].children.length >= 1) {
		//       temp = temp.concat(menuList[i].children);
		//       continue;
		//     }
		//     // 组装路由
		//     var route = {
		//       'menuId': menuList[i].id,
		//       'name': '',
		//       'title': menuList[i].name,
		//       'url': '',
		//       'params': {}
		//     };
		//     var URL = (menuList[i].url || '').replace(/{{([^}}]+)?}}/g, function (s1, s2) {
		//       return eval(s2);
		//     }); // URL支持{{ window.xxx }}占位符变量
		//     if (vm.$validate.isURL(URL)) {
		//       route.name = 'i-' + menuList[i].id;
		//       route.url = URL;
		//     } else {
		//       URL = URL.replace(/(.+)\.html/, '$1').replace(/^\//, '').replace(/_/g, '-');
		//       route.name = URL.replace(/\//g, '-');
		//       route.url = './modules/' + URL + '.html';
		//     }
		//     window.SITE_CONFIG.routeList.push(route);
		//   }
		//   if (temp.length >= 1) {
		//     return vm.addMenuRouteList(temp);
		//   }
		// },
		// 路由
		// routerHandle: function (isInit) {
		//   var routeName = window.location.hash.substring(1).split('?')[0];
		//   // 初始化
		//   if (isInit && typeof (isInit) === 'boolean') {
		//     window.addEventListener('hashchange', vm.routerHandle);
		//     // 如路由为空, 默认为home首页
		//     if (!/\S/.test(routeName)) {
		//       window.location.hash = 'home';
		//       return false;
		//     }
		//     // 如重定向路由包含__双下划线, 为临时添加路由
		//     if (/__.*/.test(routeName)) {
		//       window.location.hash = routeName.replace(/__.*/, '');
		//       return false;
		//     }
		//   }
		//   var route = window.SITE_CONFIG.routeList.filter(function (item) {
		//     return item.name === routeName
		//   })[0];
		//   if (!route) {
		//     return false;
		//   }
		//   var tab = vm.contentTabs.filter(function (item) {
		//     return item.name === routeName
		//   })[0];
		//   if (!tab) {
		//     tab = route;
		//     vm.contentTabs.push(tab);
		//   }
		//   vm.sidebarMenuActiveName = tab.menuId;
		//   vm.contentTabsActiveName = tab.name;
		// },
		// 国际化
		// i18nHandle: function (val, oldVal) {
		//   Cookies.set('language', val);
		//   document.querySelector('html').setAttribute('lang', val);
		//   document.title = vm.$i18n.messages[val].brand.lg;
		//   if (oldVal) {
		//     window.location.reload();
		//   }
		// },
		// 获取当前管理员信息
		// getUserInfo: function () {
		// return vm.$http.get('/sys/user/info').then(function (res) {
		//   if (res.data.code !== 0) {
		//     return vm.$message.error(res.data.msg);
		//   }
		//   vm.user.id = res.data.data.id;
		//   vm.user.name = res.data.data.username;
		//   vm.user.realName = res.data.data.realName;
		//   vm.user.superAdmin = res.data.data.superAdmin;
		// }).catch(function () {});
		// },
		// 获取权限
		// getPermissions: function () {
		// return vm.$http.get('/sys/menu/permissions').then(function (res) {
		//   if (res.data.code !== 0) {
		//     return vm.$message.error(res.data.msg);
		//   }
		//   window.SITE_CONFIG['permissions'] = res.data.data;
		// }).catch(function () {});
		// }
		// }
	}
</script>

<style scoped>

</style>
